<template>
  <page-container>
    <a-spin :spinning="loading">
      <a-card>
        <a-form layout="inline">
          <a-form-item label="扫描条形码">
            <a-input
              placeholder="请使用扫码枪扫描"
              v-model="code"
              autoFocus
              @blur="onInputBlur"
              allowClear
              @keyup.enter.native="onScanCode"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onScanCode">确定</a-button>
          </a-form-item>
        </a-form>
        <div class="print-container" v-if="order">
          <!-- <div class="table-title">和订单其他衣服一起打印吧~</div> -->
          <div class="print-item-wrap">
            <div class="print-item">
              <div class="print-top">
                <div class="print-left">
                  <div class="print-img">
                    <barcode
                      :value="goods.bar_code"
                      :width="1"
                      :height="41"
                      :fontSize="12"
                      fontOptions="Arial"
                      :text="goods.bar_code"
                      >条形码生成失败
                    </barcode>
                  </div>
                  <!-- <div class="print-code">{{ goods.bar_code }}</div> -->
                </div>
                <div class="print-right">
                  <div class="print-info">
                    <span class="print-info-item">品名:{{ goods.clothes_name }}</span>
                  </div>
                  <div class="print-info">
                    <span class="print-info-item">姓名:{{ order.send_name }}</span>
                  </div>
                  <div class="print-info">
                    <span class="print-info-item">电话:{{ order.send_mobile }}</span>
                  </div>
                </div>
              </div>
              <div class="print-bottom">
                <div class="print-info">
                  <span class="print-info-item">店:{{ store.name }}</span>
                </div>
                <div class="print-info">
                  <span class="print-info-item">封签号:{{ goods.seal_code }}</span>
                </div>
                <div class="print-info">
                  <span class="print-info-item">架号:{{ goods.monad_code }}</span>
                </div>
                <div class="print-info">
                  <span class="print-info-item">地址:{{ order.send_address }}</span>
                </div>
              </div>
            </div>
            <!-- v-print="printObj" -->
            <div style="display: none">
              <div class="print-item-content print-page" id="page1" style="padding-left: 20px; overflow: hidden">
                <div class="print-top" style="display: flex">
                 <!-- <div class="print-left">
                    <div class="print-img">
                      <barcode
                        :value="goods.bar_code"
                        :width="1"
                        :height="38"
                        :fontSize="10"
                        fontOptions="Arial"
                        :text="goods.bar_code"
                        >条形码生成失败
                      </barcode>
                    </div>
                  </div> -->
                  <div class="print-right" style="margin-left: 20px;">
                    <div class="print-info">
                      <span class="print-info-item" style="font-size: 10px">品名:{{ goods.clothes_name }}</span>
                    </div>
                    <div class="print-info">
                      <span class="print-info-item" style="font-size: 10px">姓名:{{ order.send_name }}</span>
                    </div>
                    <div class="print-info">
                      <span class="print-info-item" style="font-size: 10px">电话:{{ order.send_mobile }}</span>
                    </div>
                  </div>
                </div>
                <div class="print-bottom" style="padding-left: 20px">
                  <div class="print-info">
                    <span class="print-info-item" style="font-size: 10px">地址:{{ order.send_address }}</span>
                  </div>
                  <div class="print-info">
                    <span class="print-info-item" style="font-size: 10px">封签号:{{ goods.seal_code }}</span>
                  </div>
                  <div class="print-info">
                    <span class="print-info-item" style="font-size: 10px">架号:{{ goods.monad_code }}</span>
                  </div>
                  <div class="print-info">
                    <span class="print-info-item" style="font-size: 10px">店名:{{ store.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a-button type="primary" style="margin-top: 8px" @click="onPrintSure(goods)">打印</a-button>
        </div>
      </a-card>
    </a-spin>
  </page-container>
</template>

<script>
import { clothesScanCode } from '@/api/clothes'
import getLodop from '@/assets/js/LodopFuncs.js'
export default {
  data() {
    return {
      code: '',
      goods: null,
      store: null,
      order: null,
      printObj: {
        id: 'print_container',
        popTitle: '打印',
        extraCss: 'https://www.google.com,https://www.google.com',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
      loading: false,
    }
  },
  created() {},
  methods: {
    onScanCode() {
      this.loading = true
      const code = this.code
      clothesScanCode({ bar_code: code })
        .then((res) => {
          this.goods = res.data.info
          this.store = res.data.store
          this.order = res.data.order
          const isPrint = res.data.is_print
          // 当isPringt = 1时直接打印
          if (isPrint === 1) {
            this.onPrintSure(res.data.info)
          }
        })
        .finally(() => {
          this.loading = false
          this.code = ''
        })
    },
    lodopPrint() {
      const refs = document.body.querySelectorAll('.print-page')
      const LODOP = getLodop()
      if (!LODOP) {
        return this.$message.warning('Web打印服务CLodop未安装启动,请下载安装')
      }
      let success = true
      for (const key in refs) {
        if (refs[key].innerHTML) {
          const status = this.CreateOneFormPage(refs[key].innerHTML)
          if (!status) {
            this.$message.warning('打印失败,请检查打印机或更换非IE浏览器重试')
            success = false
            break
          }
        }
      }
      return success
    },
    CreateOneFormPage(htmlContent) {
      const LODOP = getLodop()
      LODOP.PRINT_INIT('')
      LODOP.SET_PRINT_PAGESIZE(1, 730, 420)
      // LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true)
      LODOP.ADD_PRINT_HTM(0, 0, 730, 420, htmlContent)
      const isProd = process.env.NODE_ENV === 'production'
      const status = isProd ? LODOP.PRINT() : LODOP.PREVIEW()
      return status
    },
    async onPrint() {
      await this.$nextTick()
      setTimeout(() => {
        this.lodopPrint()
      }, 20)
    },
    onPrintSure(goods) {
      if (goods.split_num) {
        this.$confirm({
          title: '打印提示',
          content: (h) => <div>{`该衣物共有${goods.split_num}个配件:${goods.split_name}`}</div>,
          okText: '打印',
          onOk: () => this.onPrint(),
        })
      } else {
        this.onPrint()
      }
    },
    onInputBlur(e) {
      e.target.focus()
    },
  },
}
</script>

<style lang="less" scoped>
.print-item-wrap {
  box-shadow: 0px 1px 10px 0px rgba(217, 217, 217, 0.35);
  border: 1px solid #eeeeee;
  width: 406px;
  &:not(:first-child) {
    margin-top: 10px;
  }
}
.print-item {
  background: #ffffff;
  padding: 14px 20px 16px;
  box-sizing: border-box;
  .print-top {
    display: flex;
  }
  .print-img {
    // width: 86px;
    // height: 41px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .print-code {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
  }
  .print-right {
    padding-top: 6px;
    margin-left: 20px;
  }
  .print-info {
    display: flex;
    .print-info-item {
      font-size: 14px;
    }
  }
  .print-bottom {
    padding-left: 8px;
  }
}
.print-container {
  margin-top: 24px;
  .print-btns {
    display: flex;
    margin-top: 20px;
    button {
      margin-right: 8px;
    }
  }
}
</style>
